<template>
	<view class="content">
		<div class="slide" style="width: 100%;" v-for="(item,index) in dataJson.banner" :key="index">
			<image :src="item.thumb" mode="widthFix"></image>
		</div>
		<div class="tool">
			<div class="items">
				<div class="icon" @click="toLink(1)">
					<image src="/static/icon/icon21.png" mode="heightFix"></image>
				</div>
				<p>公司简介</p>
			</div>
			<div class="items" @click="toLink(2)">
				<div class="icon">
					<image src="/static/icon/icon22.png" mode="heightFix"></image>
				</div>
				<p>新闻列表</p>
			</div>
			<div class="items" @click="toLink(3)">
				<div class="icon">
					<image src="/static/icon/icon23.png" mode="heightFix"></image>
				</div>
				<p>商城</p>
			</div>
		</div>
		<h3 class="title">热点新闻</h3>
		<div class="list">
			<div class="items" v-for="(item,index) in newsList " :key="index">
				<div class="icon">
					<image :src="item.thumb" mode="aspectFill"></image>
				</div>
				<div class="r">
					<h3>{{item.title}}</h3>
					<p>{{item.description}}</p>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				title: 'Hello',
				dataJson: {},
				newsList: [],
			}
		},
		onLoad(options) {
			uni.$emit('setUid', options.uid)
			console.log(options)
			this.getNewsList()

		},
		onShow() {
			this.getShopList()
		},
		methods: {
			toLink(num) {
				if (num == 1) {
					uni.navigateTo({
						url: "/pages/gsjz/gsjz"
					})
				}else if(num==2){
					uni.navigateTo({
						url:"/pages/news/news"
					})
				}
			},
			getShopList() {
				request({
					url: 'site/index',
					method: 'get',
					data: {}
				}).then(res => {
					if (res.status == 200) {
						this.dataJson = res.data
					}
				})
			},
			getNewsList() {
				request({
					url: 'site/news-list',
					method: 'get',
					data: {
						hot: 1
					}
				}).then(res => {
					if (res.status == 200) {
						this.newsList = res.data.list
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background-color: #f7f7f7;
	}

	.main {
		.btn {
			width: 400rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			background-color: rgb(74, 144, 226);
			border-radius: 40rpx;
			color: rgb(255, 255, 255);
			border: none;
		}
	}


	.slide {
		width: 100%;

		image {
			width: 100%;
			display: block;
		}

		swiper {
			height: 360rpx;

			.swiper-item {
				width: 100%;
				height: 100%;

				image {
					display: block;
				}
			}


		}
	}

	.tool {
		display: flex;
		justify-content: center;
		background-color: #fff;
		padding: 30rpx 0;
		margin-bottom: 20rpx;

		.items {
			text-align: center;
			width: 30.3%;

			p {
				font-size: 28rpx;
				color: #333;
				margin-top: 20rpx;
			}

			.icon {
				width: 160rpx;
				height: 160rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #eee;
				border-radius: 100rpx;
				margin: 0 auto;

				image {
					height: 80rpx;
				}
			}
		}
	}

	.title {
		padding: 30rpx 30rpx;
		font-size: 38rpx;
		font-weight: bold;
		border-bottom: 1px solid #eee;
	}

	.list {
		.items {
			width: 100%;
			background-color: #fff;
			padding: 10rpx 30rpx;
			display: flex;
			box-sizing: border-box;
			align-items: center;

			.icon {
				width: 180rpx;
				height: 180rpx;
				flex-shrink: 0;
				margin-right: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.r {
				flex: 1;

				h3 {
					font-size: 32rpx;
				}

				p {
					font-size: 26rpx;
					color: #333;
					overflow: hidden;
					text-overflow: ellipsis;
					word-break: break-word;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>